import Vue from 'vue'
import Vuex from 'vuex'
// 导入分模块
import tempStore from './module/temp'

// 安装vuex持久化插件
//  npm i vuex-persistedstate
// 导入vuex的持久化插件
import createPersistedState from 'vuex-persistedstate';
// js的常见的设计模式有哪些
// 单例模式  构造模式  工厂模式

// 观察者模式（发布，订阅）  vue中 vuex,eventBus
// 首先有一个发布的类  ， 可以再类中实现 添加订阅者 移除订阅者等功能
// 订阅类的 信息发生变化，可以同时 通知所有观察者

// Vuex 是vue的公共状态管理，
// 可以实现多个组件使用同一个状态， 完成 多组件的数据管理

// vuex有5个属性 
// state vuex的 公共状态
// mutations 同步修改state的方法
// actions 异步修改state的方法
// getters 是 vuex的计算属性 用来计算state的数据
// modules vuex的分模块

Vue.use(Vuex)

export default new Vuex.Store({
  state: {//公共状态
    count:1,
    myname:"小王",
    myage:88
  },
  mutations: {//同步修改 state数据的方法  this.$store.commit("方法名",实参)

      editCount(state,num){ //第一参数 固定state,第二是形参
        state.count+=num;
      }
  },
  actions: { //异步修改state的方法
        // 触发actions的方法 用this.$store.dispatch('actions的方法名',实参)
    countAct({commit},num){ 
        // actions内部 去触发mutaions的方法 
        commit('editCount',num)

    }
  },
  getters:{//vuex的计算属性 计算state数据
    countDouble(state){
       return state.count*2
    }
  },
  modules: { //vuex的分模块
      tempStore//导入的分模块
  },
  // 配置vuex的持久化插件
  plugins: [createPersistedState({
    storage:window.localStorage
  })]
})
